<template>
  <div
    class="compass-r-box"
    :class="parentClass"
    :style="{ width: width + 'px', height: width + 'px' }"
  >
    <!-- 中间展示内容 -->
    <div
      id="titlename"
      class="compass-r-center"
      :class="classCenter"
      @click="reset('GOTO_PRESET')"
    >
      <!-- <uni-icons type="reload" color="#2263BF" size="30"></uni-icons> -->
      <el-icon color="#2263BF"><RefreshRight /></el-icon>
    </div>
    <div
      class="compass-r-ul"
      :style="{ transform: `rotate(${nowRotating}deg)` }"
    >
      <div
        v-for="(item, idx) in dataList"
        :key="idx"
        @touchstart="handleTouchStart(item)"
        @touchend="handleTouchEnd"
        @pointerup="handleTouchEnd"
        class="compass-r-li"
        :class="{ 'compass-li-check': primaryNode === idx }"
        :style="{
          width: width / 2 + 'px',
          height: width / 2 + 'px',
          transform: `rotate(${idx * intervalAngle()}deg) skew(${skew()}deg)`,
        }"
      >
        <div>
          <p
            class="textdiv"
            :style="{
              width: width + 'px',
              height: width + 'px',
              transform: `skew(${-skew()}deg) rotate(${reverse()}deg)`,
              paddingTop: paddingTop + 'px',
              display: 'block',
            }"
          >
            <span class="vertical-name">
              <!-- <uni-icons type="up" color="#fff" size="30"></uni-icons> -->
              <el-icon style="font-size: 30px"><CaretTop /></el-icon>
            </span>
            <!-- <div class="vertical-name" v-if="vertical">
							111111111
						</div> -->
            <!-- <template v-else>
							<div class="text-echart" v-for="(text,index) in item.name">
								222222
							</div>
						</templ -->
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, defineProps, ref } from "vue";
import { handlecameracontrol } from "@/api/videoplan.js";
const width = "261";
const classCenter = "compass-r-center";
const parentClass = "compass-r-parent";
const defaultIndex = -1;
const paddingTop = 10;
const vertical = false;
const name = "全部";
const startAngle = 45;
const primaryNode = null; //当前选中节点
const nowRotating = ref(0);
const isback = false;
const props = defineProps({
  did: String,
});
const dataList = [
  {
    code: 120117,
    name: "1",
    parCode: null,
    districtId: 120117,
    type: "0",
    command: "UP",
  },
  {
    code: 120118,
    name: "2",
    parCode: null,
    districtId: 120118,
    type: "1",
    command: "RIGHT_UP",
  },
  {
    code: 120119,
    name: "3",
    parCode: null,
    districtId: 120119,
    type: "2",
    command: "RIGHT",
  },
  {
    code: 120100,
    name: "4",
    parCode: null,
    districtId: null,
    type: "3",
    command: "RIGHT_DOWN",
  },
  {
    code: 120118,
    name: "5",
    parCode: null,
    districtId: 120118,
    type: "1",
    command: "DOWN",
  },
  {
    code: 120119,
    name: "6",
    parCode: null,
    districtId: 120119,
    type: "2",
    command: "LEFT_DOWN",
  },
  {
    code: 120100,
    name: "7",
    parCode: null,
    districtId: null,
    type: "3",
    command: "LEFT",
  },

  {
    code: 120100,
    name: "8",
    parCode: null,
    districtId: null,
    type: "3",
    command: "LEFT_UP",
  },
];

function resetCenter() {
  this.primaryNode = null;
}

function intervalAngle() {
  let len = dataList.length;
  return 360 / len;
}

function skew() {
  return 90 - intervalAngle();
}

function reverse() {
  return -(90 - intervalAngle() / 2);
}

function checkNode(idx) {
  // this.primaryNode = idx;
  nowRotating.value = rotating(idx);
  // this.name = this.dataList[idx].name;
}

function rotating(idx) {
  let rotate = idx * intervalAngle();
  return idx === -1 ? this.startAngle : 90 - rotate - intervalAngle() / 2;
}

function reset(cmd) {
  // {
  //       action: 0,
  //       cameraId: props.vid,
  //       command: cmd,
  //     }
}
let timer = null;
function handleTouchStart(cmd) {
  console.log("触摸开始", cmd);
  // timer = setTimeout(() => {
  //   console.log("长按逻辑");
  //   // {
  //   //       action: 0,
  //   //       cameraId: props.vid,
  //   //       command: cmd,
  //   //     }
  //   handlecameracontrol({
  //     action: 0,
  //     cameraId: props.did,
  //     deviceId: props.did,
  //     command: cmd.command,
  //   });
  // }, 350);
  handlecameracontrol({
    action: 0,
    cameraId: props.did,
    deviceId: props.did,
    command: cmd.command,
  });
}

function handleTouchEnd(e) {
  // clearTimeout(timer);
  console.log("触摸结束", "STOP");
  // action: 1,
  //      cameraId: props.vid,
  //      command: "LEFT",
  // handlecameracontrol({
  //   // action: 1,
  //   cameraId: props.did,
  //   // deviceId: props.did,
  //   // command: "STOP",
  //   action: 1,
  //   command: "LEFT",
  // });
  e.preventDefault();
  setTimeout(() => {
    handlecameracontrol({
      // action: 1,
      cameraId: props.did,
      // deviceId: props.did,
      // command: "STOP",
      action: 1,
      command: "LEFT",
    });
  }, 30);
}

onMounted(() => {
  checkNode(0);
});
</script>


<style lang="scss">
.compass-r-box {
  width: 261rpx !important;
  height: 261rpx !important;
}
.compass-r-li {
  width: 130rpx !important;
  height: 130rpx !important;
}
.textdiv {
  width: 261rpx !important;
  height: 261rpx !important;
  padding-top: 10rpx !important;
  .vertical-name {
    font-size: 30rpx !important;
  }
}

.compass-r {
  position: relative;
}

.compass-r-box {
  box-sizing: content-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  z-index: 10;
  background: #e4effd;
  border: 2rpx solid #c3dcff;

  .compass-r-center {
    width: 105rpx;
    height: 105rpx;
    overflow: hidden;
    position: relative;
    z-index: 10;
    border-radius: 100%;
    // background: #333;
    text-align: center;

    font-size: 14rpx;
    box-sizing: content-box;
    cursor: pointer;
    background: #fff;
    line-height: 110rpx;
    font-size: 60rpx;
    font-weight: 600;
    z-index: 999;
  }

  .compass-r-ul {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    position: absolute;
    border-radius: 100%;
    overflow: hidden;
    z-index: 9;
    left: 0;
    top: 0;
    transition: transform 0.8s linear;

    div {
      transform-origin: 100% 100%;
      position: absolute;
      left: 0;
      top: 0;
      overflow: hidden;
      box-sizing: content-box;
      font-size: 14rpx;
      color: #e4edff;
      background: rgba(255, 255, 255, 0);
      cursor: pointer;

      &.compass-li-check {
        background: #2263bf;

        div {
          background: #2263bf;
          // background: radial-gradient(rgba(5, 241, 255, 1) 7%,
          // 		rgba(5, 241, 255, 0.8) 35%,
          // 		rgba(5, 241, 255, 1) 37%,
          // 		rgba(13, 249, 255, 0.5) 38%,
          // 		rgba(13, 249, 255, 0.6) 38%,
          // 		rgba(13, 249, 255, 0.2) 66%);
        }
      }

      div {
        text-align: center;
        position: relative;
        box-sizing: border-box;

        // &:hover {
        //   background: #2263bf;
        // }

        .vertical-name {
          position: absolute;
          display: inline-block;
          width: 24px;
          height: 40%;
          left: 50%;
          overflow: hidden;
          color: #fff;
          margin-left: -24rpx;
          margin-top: -10rpx;
        }
      }

      div {
        // border-bottom: 1rpx solid rgba(111, 119, 137, 1);
        height: 100%;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
      }

      //   .point-circle {
      //     position: absolute;
      //     left: 5rpx;
      //     bottom: 0rpx;
      //     content: "";
      //     background: rgba(138, 215, 224, 1);
      //     width: 3rpx;
      //     height: 3rpx;
      //     border-radius: 100%;
      //   }
    }
  }
}

.compass-r-parent {
  border: 1rpx solid #3cc5e4;
  // background: radial-gradient(rgba(74, 223, 255, 1),
  // 		rgba(44, 186, 226, 0.7) 20%,
  // 		rgba(15, 29, 57, 0.8) 50%,
  // 		rgba(44, 186, 226, 0.8) 90%,
  // 		rgba(10, 60, 88, 0.5));
}

.text-echart {
  display: inline-block;
}
</style>